<template>
    <div class="add-product-wrapper">
      <el-form label-width="108px" :model="form" ref="form" :rules="rules">
        <el-card style="margin: 20px 20px; font-size: 14px">
          <div slot="header">
            <span>基本信息</span>
          </div>
          <el-row>
            <el-col :span="24">
            <el-form-item label="节目" prop="musicId">
              <el-select v-model="form.musicId" filterable placeholder="节目" @change="getmusicForm">
                <el-option v-for="it in musicallArr" :key="it.id" :value="it.id" :label="it.name"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
            <el-col :span="24">
              <el-form-item label="演员" prop="actorIds">
                <el-select v-model="form.actorIds" filterable placeholder="演员" multiple style="max-width:100%;width:100%" @change="getactorIdsForm">
                <el-option v-for="it in actorallArr" :key="it.id" :value="it.id" :label="it.name"></el-option>
              </el-select>
              </el-form-item>
            </el-col>
  
           
            <el-col :span="24">
              <el-form-item label="排序" prop="sort">
                <el-input v-model="form.sort" placeholder="请输入排序"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
  
        <div class="tc">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-form>
    </div>
  </template>
  
  <script>
  import { getplanitem, addplanitem, updateplanitem }  from "@/api/program/program";
  import { listmusicall }  from "@/api/music/music";
  import { listactorall }  from "@/api/actor/actorMage";
  export default {
    name: "AddPrigramMusic",
    dicts: [],
    components: {},
    data() {
      return {
        rules: {
          name: [{ required: true, message: "请输入演员名称", trigger: "blur" }],
          introduction: [{ required: true, message: "请输入演员简介", trigger: "blur" }],
          headImgurl: [{ required: true, message: "请上传演员头像", trigger: "blur" }],
        },
        planId:'',
        goodId:'',
        musicallArr:[],
        actorallArr:[],
        form: {
          
        },
       
      };
    },
    watch: {
    // 监听路由对象本身
    '$route'(to, from) {
      // 检查参数的变化
      console.log('9999')
      if (to.query.id!== from.query.id) {
        // 参数发生变化时的处理逻辑
        if(to.query.id){
          this.planId=to.query.planId
          this.goodId=to.query.goodId
          this.getInfo(to.query.id);
        }else{
          this.planId=to.query.planId
          this.goodId=to.query.goodId
          this.form={}
        }
       
      }
    }
  },
    created() {
      const { id ,planId,goodId} = this.$route.query;
      this.planId=planId
      this.goodId=goodId
      if (id) {
        this.getInfo(id);
      }
      this.getlistmusicallArr()
      this.getlistactorallArr()
    },
    methods: {
      getmusicForm(e){
        const result =  this.musicallArr.find(ele => ele.id == e);
        this.form.musicName=result.name
      },
      getactorIdsForm(e){
        console.log(e)
        let str=e.join(',')
        let actorName=[]
        if(str){
          this.actorallArr.forEach(function(ele, index) { 
             if(str.indexOf(ele.id)>-1){
              actorName.push(ele.name)
             }
         })
        }else{
          actorName=[]
        }  
       this.form.actorName=actorName.join(',')
      
      },
      //获取节目getlistmusicallArr
      getlistmusicallArr() {
      const query = {musicName:''};
      listmusicall(query).then((response) => {
        let data = response
        this.musicallArr=data
        console.log(data)
    
      });
    },
      //获取演员
      getlistactorallArr() {
      const query = {actorName:''};
      listactorall(query).then((response) => {
        let data = response
        this.actorallArr=data
        console.log(data)
    
      });
    },
      getInfo(id) {
        getplanitem(id).then((response) => {
          let  data=response
          this.form =data;
          if(data.actorIds){
            let actorIdsArr=data.actorIds.split(',')
            this.form.actorIds=[]
            let that=this
            actorIdsArr.forEach(function(ele, index) { 
              that.form.actorIds.push(Number(ele))
           })
          console.log(that.form.actorIds)
            this.form.actorName=data.actorName.split(',')
          }
         
         
        
        });
      },
      /** 提交按钮 */
      submitForm() {
        let data=this.form.actorIds
        this.form.planId=this.planId
        this.form.goodId=this.goodId
        this.form.actorIds=data.join(',')
        this.$refs["form"].validate((valid) => {
          if (valid) {
            if (this.form.id != null) {
                updateplanitem(this.form).then((response) => {
                this.$modal.msgSuccess("修改成功");
              });
            } else {
                addplanitem(this.form).then((response) => {
                this.$modal.msgSuccess("新增成功");
              });
            }
            this.cancel();
          } else {
            if (this.form.name) {
              this.$alert("请填写规格价格", "提示", {
                confirmButtonText: "确定",
              });
            } else {
              this.$alert("请填写商品名称", "提示", {
                confirmButtonText: "确定",
              });
            }
          }
        });
      },
      cancel() {
        this.$tab.closeOpenPage({ path: "/performManagement/programMusicList" , query: { id: this.planId,goodId:this.goodId} });
      },
    },
  };
  </script>
  
  <style lang="stylus">
  .add-product-wrapper {
    padding: 12px;
  
    .content {
      margin: 0 auto;
      width: 75%;
      min-width: 800px;
    }
  
    .sku-wrapper {
      background-color: #f7f8fa;
      padding: 12px;
  
      .sku_sorts {
        .sku_sort {
          background-color: white;
          margin-bottom: 12px;
  
          .label {
            padding: 8px;
          }
  
          .values {
            padding: 8px 0 0 8px;
            border-top: 1px solid $border-color;
            display: flex;
            flex-wrap: wrap;
  
            .value {
              padding: 0 32px 8px 0;
              width: 200px !important;
              display: flex;
              align-items: center;
            }
          }
        }
      }
    }
  
    .img-upload-mini .el-upload--picture-card {
      width: 48px;
      height: 48px;
      line-height: 57px;
    }
  }
  </style>
  